<html>
<head>
  <title>Complex Layout</title>
    <link rel="stylesheet" type="text/css" href="./css/ext-all.css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Open-jACOB Draw2D :: ResizeImage</title>
        <!-- common, all times required, imports -->

        <SCRIPT src='http://draw2d.org/draw2d/files/demo/wz_jsgraphics.js'></SCRIPT>
        <SCRIPT src='http://draw2d.org/draw2d/files/demo/mootools.js'></SCRIPT>         
        <SCRIPT src='http://draw2d.org/draw2d/files/demo/moocanvas.js'></SCRIPT>                        
        <SCRIPT src='http://draw2d.org/draw2d/files/demo/draw2d.js'></SCRIPT>

        <!-- demo specific imports -->
	<SCRIPT src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/ResizeImage.js"></SCRIPT>
	<SCRIPT src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/Start.js"></SCRIPT>

	<SCRIPT src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/End.js"></SCRIPT>
	<SCRIPT src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/ContextmenuConnection.js"></SCRIPT>
	<SCRIPT src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/MyInputPort.js"></SCRIPT>
	<SCRIPT src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/MyOutputPort.js"></SCRIPT>

<!-- use this imports if you whant the ExtJs native implementation

    <script type="text/javascript" src="./ext-base.js"></script> 
-->

<!-- use this imports if you prefere jquery

    <script type="text/javascript" src="./adapter/jquery/jquery.js"></script> 
    <script type="text/javascript" src="./adapter/jquery/jquery-plugins.js"></script>
    <script type="text/javascript" src="./adapter/jquery/ext-jquery-adapter.js"></script>
-->

<!-- use this import if you prefere prototype

    <script type="text/javascript" src="./adapter/prototype/prototype.js"></script>
    <script type="text/javascript" src="./adapter/prototype/effects.js"></script> 
    <script type="text/javascript" src="./adapter/prototype/scriptaculous.js"></script>
    <script type="text/javascript" src="./adapter/prototype/ext-prototype-adapter.js"></script>
-->

<!-- use this imports if you whant use the Yahoo utility methods -->
    <link rel="stylesheet" type="text/css" href="http://draw2d.org/draw2d/files/demo/YahooUI_integration/css/xtheme-vista.css" />
    <script type="text/javascript" src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/adapter/yui/ext-yui-adapter.js"></script>


    <script type="text/javascript" src="http://draw2d.org/draw2d/files/demo/YahooUI_integration/ext-all.js"></script>

</head>
<body>
  <div id="toolbar"></div>
  <div id="obj2">
    empty at the moment....
  </div>
  <div id="obj1">
      <center>
      <br>
      <br>

      <img src="Start.png" id="dragMe" style="cursor:move"/>
      <br>
      <br>
      <br>
      <img src="End.png"   id="dragMe2" style="cursor:move"/>
      </center>
  </div>

  <div id="center1" class="x-layout-active-content">

      <div id="paintarea" style="position:relative;width:3000px;height:3000px;" >
      </div>
  </div>

  <div id="debug">
  </div>

 <script>
function debug(msg)
{
  var console = document.getElementById("debug");
  console.innerHTML=console.innerHTML+"<br>"+msg;
}
  /**********************************************************************************
   * 
   * Do the Draw2D Stuff
   *
   **********************************************************************************/
  var workflow  = new draw2d.Workflow("paintarea");
//  workflow.setEnableSmoothFigureHandling(true);

  // Add the image node to the canvas
  //
  var startObj = new draw2d.ResizeImage("Image.gif");
  workflow.addFigure(startObj, 200,300);


  // Add an simple annotation to the canvas
  //
  var annotation = new draw2d.Annotation("NOTE: Drag&Drop the red port to the blue port to create a connection. Use the connection context menu to switch the router implementation.");
  annotation.setDimension(300,70);
  workflow.addFigure(annotation,20,50);

  var annotation = new draw2d.Annotation("NOTE: Drag&Drop the objects from the left hand tool palette to the canvas to insert a new object.");
  annotation.setDimension(300,70);
  workflow.addFigure(annotation,20,150);

  var annotation = new draw2d.Annotation("NOTE: Test the context menu of the blue connections!!!.");
  annotation.setDimension(300,70);
  workflow.addFigure(annotation,20,250);


  // Add the start node to the canvas
  //
  var startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,300);

  // Add the end node to the canvas
  //
  var endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,350);

debug("start");
  /**********************************************************************************
   * 
   * Do the Ext (Yahoo UI) Stuff
   *
   **********************************************************************************/
  var center = new Ext.ContentPanel('center1', {width:100, height:200});
   Example = function(){
            var layout;
            return {
               init : function(){
                  layout = new Ext.BorderLayout(document.body, {
                        west: {
                           split:true,
                           initialSize: 202,
                           minSize: 175,
                           maxSize: 400,
                           titlebar: true,
                           collapsible: true,
                           autoScroll:true,
                           animate: true
                        },
                        north: {
                           initialSize: 30,
                           split:false,
                           titlebar: false,
                           collapsible: false,
                           animate: false
                        },
                        south: {
                           initialSize: 130,
                           split:false,
                           titlebar: true,
                           collapsible: true,
                           autoScroll:true,
                           animate: true
                        },
                        center: {
                           titlebar: true,
                           autoScroll:true,
                           fitToFrame:true
                  }
                  });

               layout.beginUpdate();
                  layout.add('south', new Ext.ContentPanel('debug',    {title: 'Debug Console'}));
                  layout.add('north', new Ext.ContentPanel('toolbar',    {title: 'South'}));
                  layout.add('west',  new Ext.ContentPanel('obj2', {title: 'Object Type 2'}));
                  layout.add('west',  new Ext.ContentPanel('obj1', {title: 'Object Type 1'}));
                  layout.add('center',center);
               layout.endUpdate();
               workflow.scrollArea = document.getElementById("center1").parentNode;
//               var dragsource=new Ext.dd.DragSource("dragMe", {ddGroup:'TreeDD',dragData:{name: "Start"}}); 
//               var dragsource=new Ext.dd.DragSource("dragMe2", {ddGroup:'TreeDD',dragData:{name: "End"}}); 
               var dragsource=new Ext.dd.DragSource("dragMe", {ddGroup:'TreeDD',dragData:{name: draw2d.Start.prototype.type}}); 
               var dragsource=new Ext.dd.DragSource("dragMe2", {ddGroup:'TreeDD',dragData:{name: draw2d.End.prototype.type}}); 
               var droptarget=new Ext.dd.DropTarget("center1",{ddGroup:'TreeDD'});
                   droptarget.notifyDrop=function(dd, e, data)
                   {
                        if(data.name)
                        {
                           var xOffset    = workflow.getAbsoluteX();
                           var yOffset    = workflow.getAbsoluteY();
                           var scrollLeft = workflow.getScrollLeft();
                           var scrollTop  = workflow.getScrollTop();

                           workflow.addFigure(eval("new "+data.name+"()"),e.xy[0]-xOffset+scrollLeft,e.xy[1]-yOffset+scrollTop);
                           return true;
                        }
                   }
               }

         };

   }();
   Ext.EventManager.onDocumentReady(Example.init, Example, true);

   var simpleToolbar = new Ext.Toolbar('toolbar');
   simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom'});
   simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-bottom'});

</script>
</body>
</html>
